import { useModel } from "umi";
import { useReactive } from "ahooks";
import { useEffect } from "react";
import { Table, Row, Col, InputNumber, Space } from "antd";
import { Card as SemiCard, ButtonGroup, Button, List } from "@douyinfe/semi-ui";
import { IconPlusCircle, IconRefresh, IconDelete, IconEdit, IconGlobeStroke, IconEyeOpened, IconServer } from "@douyinfe/semi-icons";

import useRoles from "../../hooks/useRoles";
import useApplication from "../../hooks/useApplication";

const { Column } = Table;

const OrganizationChargeApplications = () => {
    const { windowInnerHeight } = useModel("global");
    const { loading, loadRoles, roles, selectedRole, setSelectedRole } = useRoles();
    const { apploading, loadRoleAndChargeApplications, applications, aggregate } = useRoles();
    const { updatePrice } = useApplication();

    useEffect(() => {
        loadRoles();
    }, []);

    useEffect(() => {
        selectedRole && loadRoleAndChargeApplications(selectedRole);
    }, [selectedRole]);

    const savePrice = async (record, values) => {
        updatePrice(record.aiUuid, values, (res) => {
            if (res) {
                loadRoleAndChargeApplications(selectedRole);
            }
        });
    };

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 54;

    return (
        <Row gutter={10} style={{ padding: 10 }}>
            <Col span={4}>
                <SemiCard
                    title={<span style={{ lineHeight: "32px", fontSize: 15 }}>所属角色</span>}
                    headerExtraContent={
                        <ButtonGroup>
                            <Button icon={<IconRefresh />} onClick={loadRoles} />
                        </ButtonGroup>
                    }
                    headerStyle={{ padding: "10px 14px" }}
                    shadows="always"
                    bordered={false}
                    bodyStyle={{ padding: 1, height: cardBodyHeight, overflow: "auto" }}
                >
                    <List
                        loading={loading}
                        dataSource={roles}
                        renderItem={(item, index) => {
                            return (
                                <List.Item
                                    key={index}
                                    className={`list-item ${selectedRole === item.oarName ? "list-item-selected" : ""}`}
                                    main={<div style={{ color: "var(--semi-color-text-0)", fontWeight: 500 }}>{item.oarName || "-"}</div>}
                                    onClick={() => setSelectedRole(item.oarName)}
                                ></List.Item>
                            );
                        }}
                    />
                </SemiCard>
            </Col>
            <Col span={20}>
                <SemiCard
                    title={<span style={{ lineHeight: "32px", fontSize: 15 }}>收费应用列表</span>}
                    headerStyle={{ padding: "10px 14px" }}
                    shadows="always"
                    bordered={false}
                    bodyStyle={{ padding: 0, height: cardBodyHeight - 46, overflow: "auto" }}
                    footerStyle={{ padding: 12 }}
                    footerLine={true}
                    footer={
                        <Space size={30}>
                            <div>开发商价合计：￥ {helper.numberFormat(aggregate.aiSdprs || 0, 2)}</div>
                            <div>服务商价合计：￥ {helper.numberFormat(aggregate.aiSpprs || 0, 2)}</div>
                            <div>客户价合计：￥ {helper.numberFormat(aggregate.aiEcprs || 0, 2)}</div>
                        </Space>
                    }
                >
                    <Table loading={apploading} size="small" dataSource={applications} rowKey="aiUuid" bordered pagination={false} scroll={{ y: cardBodyHeight - 46 }}>
                        <Column title="序号" align="center" width={60} render={(_, r, i) => i + 1} />
                        <Column title="应用名称" dataIndex="aiName" align="left" />
                        <Column title="分类名称" dataIndex="aiClas" align="center" />
                        <Column title="适用对象" dataIndex="aiObje" align="center" />
                        <Column title="开发组织" dataIndex="aiSdna" align="center" width={240} />
                        <Column title="开发商价" dataIndex="aiSdpr" align="right" width={100} render={(_) => "￥" + helper.numberFormat(_, 2)} />
                        <Column
                            title="服务商价"
                            dataIndex="aiSppr"
                            align="right"
                            width={100}
                            render={(_, r, i) => (
                                <InputNumber
                                    controls={false}
                                    prefix="￥"
                                    value={_}
                                    onPressEnter={(e) => {
                                        savePrice(r, { aiSppr: parseFloat(e.target.value) });
                                    }}
                                    style={{ width: "100%" }}
                                />
                            )}
                        />
                        <Column
                            title="客户价"
                            dataIndex="aiEcpr"
                            align="right"
                            width={100}
                            render={(_, r, i) => (
                                <InputNumber
                                    controls={false}
                                    prefix="￥"
                                    value={_}
                                    onPressEnter={(e) => {
                                        savePrice(r, { aiEcpr: parseFloat(e.target.value) });
                                    }}
                                    style={{ width: "100%" }}
                                />
                            )}
                        />
                    </Table>
                </SemiCard>
            </Col>
        </Row>
    );
};

export default OrganizationChargeApplications;
